<!--填报课程考核实施计划-->
<template>
  <div class="paperprint-container">
    <div class="search-container">
      <div class="search-container-left"    > 
        <div
          class="search-container-item"
      
          v-for="(select, index) in selectList"
          :key="index"
        >
     
          <div class="search-container-item">
              <span>学期: </span>
              <el-select
              v-model="jc"
              style="width: 91px"
              size="mini"
              placeholder="请选择"
              >
              <el-option
              v-for="item in jcList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
              </el-select>
            </div>
      </div>
          <div class="search-container-item">
              <span>培养层次: </span>
              <el-select
              v-model="jc"
              style="width: 121px"
              size="mini"
              placeholder="请选择"
              >
              <el-option
              v-for="item in jcList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
              </el-select>
            </div>
          <div class="search-container-item">
              <span>修习类型: </span>
              <el-select
              v-model="jc"
              style="width: 122px"
              size="mini"
              placeholder="请选择"
              >
              <el-option
              v-for="item in jcList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
              </el-select>
            </div>


       
        <div class="search-container-item">
          <span>学   号:</span>
          <el-input
            style="width: 142px"
            size="mini"
            placeholder="请输入课程负责单位"
            v-model="course"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>学员姓名:</span>
          <el-input
            style="width: 142px"
            size="mini"
            placeholder="请输入课程负责单位"
            v-model="course"
          ></el-input>
        </div>
       <div class="search-container-item">
          <span>学员队</span>
          <el-select
            v-model="xq"
            style="width: 91px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        
       
      </div>
      <div class="search-container-right" style="justify-content: space-between;">
         <div class="search-container-left">
            <div class="search-container-item">
              <span>年级: </span>
              <el-select
              v-model="jc"
              style="width: 91px"
              size="mini"
              placeholder="请选择"
              >
              <el-option
              v-for="item in jcList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
              </el-select>
            </div>
            <div class="search-container-item" style="margin-left:90px">
              <span>专业班次: </span>
              <el-select
              v-model="zybc"
              style="width: 121px"
              size="mini"
              placeholder="请选择"
              >
              <el-option
              v-for="item in zybcList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
              </el-select>
            </div>
             <div class="search-container-item">
          <span>课程名称: </span>
          <el-input
            style="width: 122px"
            size="mini"
            placeholder="请输入课程负责单位"
            v-model="course"
          ></el-input>
        </div>
         
            <div class="search-container-item" style="margin-top:4px">
             <span>查看期中不及格人员:</span>
             <el-checkbox v-model="checked"></el-checkbox>
            </div>
             <div class="search-container-item" style="margin-top: 4px; margin-left:20px">
              <span>查看总评不及格人员:: </span>
              <el-checkbox v-model="checkeda"></el-checkbox>
            </div>
           

         </div>
         <div class="search-container-right" style="margin-right:123px">
            <div  class="search-button" >
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
            </div>
         </div>
      </div>
    </div>

      <div class="table-container">
      <div class="table-header">
        <!-- <div class="item" style="width: 67px">
          <el-checkbox
            v-model="rowColumnChecked"
            @change="selectCheck('all')"
          ></el-checkbox>
        </div> -->
        <div class="item" style="width: 135px">
         学期
        </div>
        <div class="item" style="width: 108px">年级</div>
        <div class="item" style="width: 106px">专业班次</div>
        <div class="item" style="width: 115px">课程编号</div>
        <div class="item" style="width: 115px">
         课程名称
        </div>
        <div class="item" style="width: 118px">
         修习类型
        </div>
        <div class="item" style="width: 109px">
          学号
        </div>
        <div class="item" style="width: 116px">
          姓名
        </div>
        <div class="item" style="width: 111px">
          课下作业成绩
        </div>
        <div class="item" style="width: 114px">
          课堂测评成绩
        </div>
        <div class="item" style="width: 114px">
         期中考试成绩
        </div>
        <div class="item" style="width: 135px">
         课终考核成绩
        </div>
      
        
        <div class="item" style="width: 141px">
         总评成绩
        </div>
          <div class="item" style="width: 116px">
         补考成绩
        </div>
        <div class="item" style="width: 111px">
         备注
        </div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 135px">{{ item.cd }}</div>
        <div class="item" style="width: 108px">{{ item.kcbh }}</div>
        <div class="item" style="width: 106px">{{ item.kcmc }}</div>
        <div class="item" style="width: 115px">{{ item.kcfzr }}</div>
         <div class="item" style="width: 115px">{{ item.jys }}</div>
        <div class="item" style="width: 118px">{{ item.kskc }}</div>
        <div class="item" style="width: 109px">{{ item.skjy }}</div>
         <div class="item" style="width: 116px">{{ item.ksfs }}</div>
        <div class="item" style="width: 111px">{{ item.cdxq }}</div>
        <div class="item" style="width: 114px">{{ item.db }}</div>
         <div class="item" style="width: 114px">{{ item.jc }}</div>
        <div class="item" style="width: 135px">{{ item.zybc }}</div>
        
        <div class="item" style="width: 141px">{{ item.jky }}</div>
        <div class="item" style="width: 116px">{{ item.rs }}</div>
        
        <div class="item" style="width: 111px">{{ item.bz }}</div>
      </div>
    </div>
   
    
  <el-dialog title="审批进度" :visible.sync="showAddMessageRemark" width="983px">
      
      <span slot="footer" class="dialog-footer">
            <div class="spjd">
            
              <div class="time-line-horizon">
                <div
                  class="time-line-block"
                  v-for="(block, index1) in pjChecks"
                  :key="index1"
                >
                  <div class="person-name">{{ block.job }}</div>
                  <div class="line-content">
                    <img
                      src="../../../assets/assessment/icon-finish.png" alt="已完成" v-if="+block.state===0"
                    />
                    <img
                      src="../../../assets/assessment/icon-dai.png" alt="待完成" v-if="+block.state===1"
                    />
                    <img
                      src="../../../assets/assessment/icon-close.png" alt="未完成"  v-if="+block.state===2"
                    />
                    <div class="date-time">
                      <span class="date">{{ block.checkdate }}</span>
                      <span class="time">{{ block.time }}</span>
                    </div>
                  </div>
<!--                  待完成0 添加留言 ， 1 已完成 查看删除编辑 ， 2 未完成-->
                  <div class="operate" v-show="block.text" v-if="+block.state===1">
<!--                    showAddMessageDialog = true-->
                    <div class="ly-block" @click="textupdate(block.checkid,block.text)">
                      <img src="../../../assets/assessment/icon-ly.png" alt="" />
                      <div class="ly">留言</div>
                    </div>
                  </div>
                  <div
                    class="operate"
                    v-show="block.text" v-if="+block.state===0" >
                    <div class="bubble-block">
                    <span>{{block.text}}</span>
                      <div class="operate-button">
<!--                         @click="showckMessageDialog = true"-->
                        <div
                          class="button-ck"
                          @click="textsave(block.checkid,block.text)"
                          v-show="block.text" v-if="+block.state===0"
                        >
                          查看
                        </div>
                        <div
                          class="button-bj"
                          @click="textupdate(block.checkid,block.text)"
                          v-show="block.text" v-if="+block.state===0"
                        >
                          编辑
                        </div>
                        <div
                          @click="textdelete(block.checkid)"
                          class="button-sc"
                          v-show="block.text" v-if="+block.state===0"
                        >
                          删除
                        </div>
                      </div>
                    </div>
                  </div>
                  <el-dialog
                    title="添加留言"
                    :visible.sync="showAddMessageDialog"
                    width="983px"
                  >
                    <div class="message-container">
                      <div>添加留言：</div>
                      <div>
                        <el-input
                          v-model="text"
                          type="textarea"
                          :rows="8"
                          style="width: 550px"
                        ></el-input>
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                    <button class="green" @click="addText(block.checkid,text)">
                      确 定
                    </button>
                  </span>
                  </el-dialog>
                  <el-dialog
                    title="编辑留言"
                    :visible.sync="showbjMessageDialog"
                    width="983px"
                  >
                    <div class="message-container">
                      <div>编辑留言：</div>
                      <div>
                        <el-input
                          v-model="text"
                          type="textarea"
                          :rows="8"
                          style="width: 550px"
                        ></el-input>
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
<!--                      showbjMessageDialog = false-->
                    <button class="green" @click="update(block.checkid)">
                      确 定
                    </button>
                  </span>
                  </el-dialog>
                  <el-dialog
                    title="查看留言"
                    :visible.sync="showckMessageDialog"
                    width="983px"
                  >
                    <div class="message-container">
                      <div>查看留言：</div>
                      <div>
<!--                        v-model="block.bjmeaasgeText"-->
                        <el-input
                          v-model="text"
                          type="textarea"
                          :rows="8"
                          style="width: 550px"
                          disabled="false"
                        ></el-input>
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                    <button class="green" @click="showckMessageDialog = false">
                      确 定
                    </button>
                  </span>
                  </el-dialog>
                </div>
              </div>
            </div>
        <button class="green" @click="showAddMessageRemark = false">
          确 定
        </button>
      </span>
    </el-dialog>
  <el-dialog
        title="命题计划打回原因"
        :visible.sync="showBackDialog"
        width="983px"
        class="back-container"
    >
      <div class="back-textas">
        <div>打回原因：</div>
        <div>
          <el-input
              v-model="meaasgeText"
              type="textarea"
              :rows="8"
              style="width: 550px; margin-left: 30px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showBackDialog = false">确 定</button>
      </span>
    </el-dialog>
  </div>
  
</template>

<script>
export default {
  
  data() {
    return {
      //审批进度
      checked:false,
      checkeda:false,
      showAddMessageRemark: false,
      showBackDialog: false,
      state:"1",
      course: "",
      xq: "1，2",
      selectList: [
        {
          type: "data",
          name: "学期：",
          val: undefined,
        },
        
      ],
      sqwr:"一队",
      sqwrList:[
        {
          value: "一队",
          label: "一队",
        },
        {
          value: "二队",
          label: "二队",
        }
      ],
      jc:"2021级",
      jcList:[
        {
          value: "2021级",
          label: "2021级",
        },
        {
          value: "2022级",
          label: "2022级",
        }
      ],
      zybc:"专业班次2",
      zybcList:[
        {
          value: "专业班次2",
          label: "专业班次2",
        },
        {
          value: "专业班次1",
          label: "专业班次1",
        }
      ],
      zt:"待下发核对",
      ztList:[
        {
          value: "待下发核对",
          label: "待下发核对",
        },
        {
          value: "已下发核对",
          label: "已下发核对",
        }
      ],
      level: "",
      ppccList: [
        {
          value: "大专",
          label: "大专",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],
      
      nj: "年级",
      njList: [
        {
          value: "年级",
          label: "大年级专",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],
      
      kcfzr: "",
      kcfzrList: [
        {
          value: "李丽",
          label: "李丽",
        },
        {
          value: "万万",
          label: "万万",
        },
      ],
       pjChecks: [
            {
              job: "教员",
              checkdate: "2021-06-04",
              time: "17：52",
              url: "icon-finish",
              text: "留言",
              state:"0",
            },
            {
              job: "教研室主任",
              checkdate: "2021-06-04",
              time: "17：52",
              url: "icon-dai",
              text: "操作",
               state:"1",
            },
            {
              job: "领导3",
              checkdate: "2021-06-05",
              time: "10：52",
              url: "icon-close",
              text: "操作",
               state:"2",
            },
          ],
       tableData: [
        {
        
          kcbh: "2020春",
          kcmc: "",
          kcfzr: "34541",
          jys:"语言分析专题",
          kskc:"必修",
          skjy:"1782678",
          ksfs:"璃妹妹",
          cdxq:"80", 
          db:"80", 
          jc:"20", 
          zybc:"80", 
          rs:"90", 
          cd:"2021秋", 
          jky:"70",
          bz:"",
        },
        {
          
          kcbh: "2020春",
          kcmc: "",
          kcfzr: "34541",
          jys:"语言分析专题",
          kskc:"必修",
          skjy:"1782678",
          ksfs:"璃妹妹",
          cdxq:"80", 
          db:"80", 
          jc:"20", 
          zybc:"80", 
          rs:"90", 
          cd:"2021秋",  
          jky:"70",
          bz:"",
        },
      ],

  
      
    };
  },
  methods:{
    auditStatus(){
      this.state=2
    },
    RouterTo(){
       this.$router.push('/admin/planManagement/editPlanManage')
     
    }
  },
  created() {
    
    
  },
 
 
 
}
</script>

<style lang="less" scoped>
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 90px;
}
.back-textas {
      margin-top: 33px;

      > div {
        display: inline-block;

        &:nth-child(1) {
          padding-left: 111px;
          font-size: 20px;
          color: rgba(0, 76, 167, 1);
          font-weight: bold;
          vertical-align: top;
        }
      }
    }
.item_btn {
  width: 55px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
 .manual-entry-container {
    .el-dialog__body {
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;
        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);
          &:last-child {
            border-bottom: none;
          }
          > div {
            display: flex;
            > div {
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;
              &:nth-child(1) {
                width: 80%;
               
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
               
              }
              &:nth-child(1) {
                 height: 200px;
              }
            }
          }
        }
      }
    }
    .el-dialog__footer {
      padding-bottom: 43px;
    }
    .dialog-footer {
      > button {
        width: 91px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }
.assessment-container {
  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;
      .el-radio {
        margin-right: 79px;
      }
    }
    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }
  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;
      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }
        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }
        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;
          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;
            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }
          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }
    .el-dialog__footer {
      padding-bottom: 76px;
      .green {
        padding: 1px 17px;
      }
    }
  }
}
.plan-entry-table-container {
  margin-top: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }
  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }
  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }
  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #02c86c;
    }
  }
  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #f3b815;
    }
  }
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.paperprint-container {
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  } 
}
</style>
<style lang="less" scoped>
@import "../../../styles/paper-printsage.less";

.el-dialog__wrapper { ::v-deep .el-dialog {overflow: auto;height: 439px;}}
.paperprint-container .search-container .search-container-item[data-v-7e0d610f] {
    color: #004ca7;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    margin-right: 90px;
}
.plan-entry-table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
</style>
